<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link :to="{name:'user',params:{id:1234}}">用户1</router-link>
			<router-link to="/user/2">用户2</router-link>
			<router-link to="/goods/3">商品</router-link>
			<router-link to="/object">传对象</router-link>
			<router-view />
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
		<script type="text/javascript">
			//定义组件
			let user = {
				template: `
				<div>
					<h2>用户</h2>
					<h2>route接受{{$route.params.id}}</h2>
				</div>
				`
			}
			let goods = {
				props:['id'],
				template: `
				<div>
					<h2>商品</h2>
					<h2>props接受{{id}}</h2>
					<router-link to="/goods/lingshi">零食</router-link>
					<router-link to="/xiangshui">香水</router-link>
					<router-view />
				</div>
				`
			}
			let lingshi = {
				template: `
				<h2>零食</h2>
				`
			}
			let xiangshui = {
				template: `
				<h2>香水</h2>
				`
			}
			let obj = {
				props:['name','age'],
				template:`
				<h2>{{name + ',' + age}}</h2>
				`
			}
			//定义router对象
			const router = new VueRouter({
				//路由规则
				routes: [{
						path: '/',
						redirect: user
					},
					{
						path: '/user/:id',
						component: user,
						name:'user'
					},
					{
						path: '/goods/:id',
						component: goods,
						props:true,
						children:[
							{path:'/goods/lingshi',component:lingshi},
							{path:'/xiangshui',component:xiangshui}
						]
					},
					{path:'/object',component:obj,props:{name:'张三',age:18}}
				]
			})
			//创建vue对象
			let demo = new Vue({
				el: '#app',
				router,
				data: {
					href: 'http://www.baidu.com',
				}
			})
		</script>
	</body>
</html>
